import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { AtList, AtListItem, AtSegmentedControl, AtSearchBar, AtAccordion, AtTag, AtDrawer, AtActionSheet, AtButton, AtActionSheetItem } from "taro-ui"
import './xiangmubingli.css'
import app from '../../../../main.js';
import jingdian from '../../../../img/jingdian.png';

export default class Xiangmubingli extends Component {
  config = {
    navigationBarTitleText: '项目病历'
  }
  constructor() {
    super(...arguments);
    // this.state = this.getData();
    this.state = {
      value: '',
      current: 0,
      open: false,
      open2: false,
      open3: false,
      show: false,
      isOpened: false,
      isOpened2: false,

      statuinfo: [
        { status: '待提交' },
        { status: '待初审' },
        { status: '初审待修改' },
        { status: '待终审' },
        { status: '终审待修改' },
        { status: '待付款' },
        { status: '已付款' },
      ],
      sortinfo: [
        { sort: '按姓名', sortNunver: 3 },
        { sort: '从新到就', sortNunver: 4 },
        { sort: '从旧到新', sortNunver: 5 },
      ],
      res: [],//患者结果集
      resDoc: [],//医生结果集
      resDocname:['全部'],
      resDocid:['none'],
      resSelf :[],//医生个人病历信息
      //分页
    }
  }
  have = true;

  //分页
  isFinish = false; // 加载更多是否结束
  offset = 0;
  length = 20;
  total = 0;

  offsetDoc = 0;
  isFinishDoc = false;

  componentWillMount() {
    this.getProject_cases();
    this.getDoctors();
    this.getProject_cases_Self();
  } 
  
  //搜索框输入内容
  onChange(value) {
    if(value.length == 0){
      this.setState({
        value: value,
        res: []
      },()=>{
        this.offset = 0;
        this.getProject_cases();
      })
    }else{
      this.setState({
        value: value
      })
    }
  }
  
  //点击导航栏
  handleClick() { 
    let me = this
    this.setState({  
        value: '',
    })
    if(this.state.current == 0){
        me.setState({
            current:1
        })
    }else{
        me.setState({
            current:0
        })
    }   
  }

  handleClick1() {
    this.offset = 0;
    this.setState({
      open: !this.state.open,
      show: !this.state.show,
      open2: false,
      open3: false,
      isOpened: false,
      isOpened2: false,
    })
  }
  handleClick2() {
    this.offset = 0;
    this.setState({
      open2: !this.state.open2,
      isOpened: !this.state.isOpened,
      open: false,
      show: false,
      open3: false,
      isOpened2: false,
    })
  }
  handleClick3() {
    this.offset = 0;
    this.setState({
      open3: !this.state.open3,
      isOpened2: !this.state.isOpened2,
      open: false,
      open2: false,
      isOpened: false,
      show: false,
    })
  }
  //关闭事件
  handleClose() {
    this.setState({
      open: false,
      show: false,
    })
  }
  handleCancel() {
    this.offset = 0;
    this.setState({
      open: false,
      open2: false,
      open3: false,
      show: false,
      isOpened: false,
      isOpened2: false,
    })
  }
  //根据撒选条件撒选值
  //根据医生
  docClick(docIndex) {
    let me = this
    me.offset = 0;
    if(docIndex == 'none'){
        let date = { token: '', offset: this.offset, length: this.length, project_id: this.$router.params.projectId}
        app.get('web/project/project_cases', date, function (res) {
            // console.log(res)
            me.setState({
              res: res.data.result.list,
              show: false,
              open: false,
            }, () => {
              // console.log(me.state.res[0]);
            })
          })
    }else{
        let date = { token: '', offset: this.offset, length: this.length, project_id: this.$router.params.projectId, doctor_ids: docIndex }
        app.get('web/project/project_cases', date, function (res) {
            // console.log(res)
            me.setState({
              res: res.data.result.list,
              show: false,
              open: false,
            }, () => {
              // console.log(me.state.res[0]);
            })
          })
    }
    
  }
  //根据状态
  docClick2(status) {
    let me = this
    me.offset = 0;
    let date = { token: '', offset: this.offset, length: this.length, project_id: this.$router.params.projectId, status: status }
    app.get('web/project/project_cases', date, function (res) {
      me.setState({
        res: res.data.result.list,
        open2: false,
        isOpened: false,
      }, () => {
        // console.log(me.state.res[0]);
      })
    })
  }
  //根据排序方式
  docClick3(sortNunver) {
    let me = this
    me.offset = 0;
    let date = { token: '', offset: this.offset, length: this.length, project_id: this.$router.params.projectId, sort: sortNunver }
    app.get('web/project/project_cases', date, function (res) {
      // console.log(res)
      me.setState({
        res: res.data.result.list,
        open3: false,
        isOpened2: false,
      }, () => {
        // console.log(me.state.res[0]);
      })
    })
  }
  //搜索
  onActionClick() {
    let me = this
    this.offset = 0;
    let keywords = this.state.value;
    if(keywords != null && keywords !=''){
    let data = { token: '', offset: this.offset, length: this.length, project_id: this.$router.params.projectId, keyword: keywords }
    app.get('web/project/project_cases', data, function (res) {
      if (res.data.result.list.length > 0) {
        let ress = me.state.res;
        ress = res.data.result.list;
        me.total = res.data.result.total;
        me.have = true
        me.setState({
          res: ress,
          show: false,
          isOpened: false,
          isOpened2: false,
        });
      } else {
        app.toast('没有找到数据')
      }
    })
  }else{
    app.toast("输入无效，请重新输入关键字")
  }
  }
  
//项目信息获取
  getProject_cases() {
    let me = this
    let date = { token: '', offset: this.offset, length: this.length, project_id: this.$router.params.projectId}
    app.get('web/project/project_cases', date, function (res) {
      if (res.data.result.list.length > 0) {
        let ress = me.state.res;
        ress = ress.concat(res.data.result.list);
        me.total = res.data.result.total;
        me.setState({
          res: ress,
          show: false,
          isOpened: false,
          isOpened2: false,
        });
      } else {
        me.isFinish = false
        me.have = false
      }
    });
  }
 
//抽屉医生信息获取
  getDoctors() {
    let me = this
    let date = { token: '', offset: this.offsetDoc, length: 500, project_id: this.$router.params.projectId }
    app.get('web/project/doctors', date, function (res) {
      if (res.data.result.list.length > 0) {
      let arr = res.data.result.list
      let name = me.state.resDocname
      let id = me.state.resDocid
      for(let val of arr){
          name.push(val.name)
          id.push(val.id)
      }
      me.setState({
        resDoc: arr,
        resDocid:id,
        resDocname:name,
        show: false,
      })
    } else {
      me.have = false
    }
    })
  }
//医生个人病历信息获取
getProject_cases_Self(){
  let me = this
  let date = { token: '', offset: this.offset, length: this.length, project_id: this.$router.params.projectId }
  app.get('web/project/personal_project_cases', date, function (res) {
    if (res.data.result.list.length > 0) {
      let ress = me.state.resSelf;
      ress = ress.concat(res.data.result.list);
      me.total = res.data.result.total;
      me.setState({
        resSelf: ress,
        show: false,
        isOpened: false,
        isOpened2: false,
      });
    } else {
      me.isFinish = false
      me.have = false
    }
  });
}



  // 上拉加载
  onReachBottom() {
    if ((this.offset + this.length) < this.total) {
      app.toast('正在加载中...');
    } else {
      app.toast('没有更多数据了');
    }
    if (!this.isFinish) {
      this.offset = this.offset + this.length;
      this.getProject_cases();
    }
  }

  //跳转
  go(id){
    app.navigateTo('../../../doctorpages/editCase/editCase?id='+id)
  }

  render() {
    //此为tabBar 0 页内容
    const list = this.state.res.map((index) => {
    //   if(index.status == '待付款' || index.status == '已付款'){
    return  <View onClick={this.go.bind(this,index.id)}>
                {/* {index.status == '待付款' || index.status == '已付款'
                ? */}
                <View className='liebiao'>              
                    <View className='box'>
                        <View className='xingming'>{app.hideStr(index.doctor_name)}</View>
                        {index.hospital == null ? <View className='yiyuan'></View>
                            : <View className='yiyuan'>{index.hospital}</View>
                        }
                        {/* <AtTag className='baoqian' circle>{index.status}</AtTag> */}
                    </View>
                    <View className='box'>
                        <View className='xingbie'>{index.gender} </View>
                        <View className='nianling'>{index.age}岁</View>
                        {index.diagnosis == null ? <View className='zhenduan'>无</View>
                            : <View className='zhenduan'>{index.diagnosis}</View>
                        }
                    </View>
                    <View className='box'>
                        <View className='at-icon at-icon-bullet-list'></View>
                        <View className='bianma'>{index.code} </View>
                        <View className='at-icon at-icon-calendar'></View>
                        <View className='riqi'>{index.created_at.substr(0, 10)} </View>
                    </View>
                    {index.is_top == '是' ? <Image className='jingdian' src={jingdian} />: none}
                </View>
                {/* :
                none
                } */}
            </View>
      // }
    })
    //此为tabBar 1 页内容
    const list2 = this.state.resSelf.map((index) => {
      return <View className='liebiao2' onClick={this.go.bind(this,index.id)}>
                <View className='box'>
                    <View className='xingming'>{index.doctor_name}</View>
                    <View className='xingbie1'>{index.gender} </View>
                    <View className='nianling1'>{index.age}岁</View>
                    <AtTag className='baoqian1' circle>{index.status}</AtTag>
                </View>
                <View className='box'>
                    {index.diagnosis == null ? <View className='zhenduan'>无</View>
                      : <View className='zhenduan'>{index.diagnosis}</View>
                    }
                </View>
                <View className='box'>
                    <View className='at-icon at-icon-bullet-list'></View>
                    <View className='bianma1'>{index.code} </View>
                    <View className='at-icon at-icon-calendar'></View>
                    <View className='riqi1'>{index.created_at.substr(0, 10)} </View>
                </View>
                </View>
    })
    return (
      <View className='xiangmujindu'>
          <View className='sousuo'>
            <AtSegmentedControl className='sou'
              values={['个人提交病历']}
              onClick={this.handleClick.bind(this)}
              current={this.state.current}
            />
          </View>
          {
            this.state.current === 1
              ? <View className='tab-content'>
                <AtSearchBar
                  value={this.state.value}
                  onChange={this.onChange.bind(this)}
                  actionName='搜一下'
                  onActionClick={this.onActionClick.bind(this)}
                />
                <View className='daohang'>
                  <View className='box'>
                    <AtAccordion className='paixu'
                      open={this.state.open}
                      onClick={this.handleClick1.bind(this)}
                      title='医生筛选'
                    >
                      <AtDrawer className='paixu'
                        show={this.state.show}
                        onClick={this.handleClick1.bind(this)}
                        onClose={this.handleClose}
                        mask
                      >
                        <AtList hasBorder={false}>
                          {this.state.resDocname.map((item,index) => {
                            let id = item.id
                            return <AtListItem
                              title={item}
                              onClick={this.docClick.bind(this, this.state.resDocid[index])}
                            />
                          })}
                        </AtList>
                      </AtDrawer>
                    </AtAccordion>
                  </View>
                  {/* <View className='box'>
                    <AtAccordion className='paixu'
                      open={this.state.open2}
                      onClick={this.handleClick2.bind(this)}
                      title='病历状态'
                    >
                      <AtActionSheet isOpened={this.state.isOpened} onClose={this.handleCancel.bind(this)}>
                        <AtList hasBorder={false}>
                          {this.state.statuinfo.map((item) => {
                            let status = item.status
                            return <AtListItem
                              title={item.status}
                              onClick={this.docClick2.bind(this, status)}
                            />
                          })}
                        </AtList>
                      </AtActionSheet>
                    </AtAccordion>
                  </View> */}
                  <View className='box'>
                    <AtAccordion className='paixu'
                      open={this.state.open3}
                      onClick={this.handleClick3.bind(this)}
                      title='排序方式'
                    >
                      <AtActionSheet isOpened={this.state.isOpened2} onCancel={this.handleCancel.bind(this)} >
                        <AtList hasBorder={false}>
                          {this.state.sortinfo.map((item) => {
                            let sorts = item.sort
                            return <AtListItem
                              title={sorts}
                              onClick={this.docClick3.bind(this, item.sortNunver)}
                            />
                          })}
                        </AtList>
                      </AtActionSheet>
                    </AtAccordion>
                  </View>
                </View>
                {list}
              </View>
              : null
          }
          {
            this.state.current === 0
              ? <View className='tab-content'>
                {list2}
              </View>
              : null
          }

        </View>
        )
      }
    }
    // reactMixin.onClass(xiangmubingli, myJs);
